<template>
    <!--系统管理 -- 系统事件配置-->
    <div>
        <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>系统事件配置</h1>
        </div> 
        <div style="border: 1px red solid;">
            <!-- <ui-form   v-model="searchForm" label-width="100px" style="width: 80%; border: 1px green solid; margin-left: 10%;"  class="query-form">
                
                    <ui-form-item label="参数配置" style="width: 35%;"  >
                        <ui-input type="text" placeholder="请输入参数编号" v-model="searchForm.customerName" > </ui-input>
                    </ui-form-item>
                
                    <ui-form-item label="参数名称"  style="width: 35%;" >
                        <ui-input type="text" placeholder="请输入参数名称" v-model="searchForm.customerNo" > </ui-input>
                    </ui-form-item>

                    <ui-form-item label="参数配置" style="width: 35%;"  >
                        <ui-input type="text" placeholder="请输入参数编号" v-model="searchForm.customerName" > </ui-input>
                    </ui-form-item>
                
                    <ui-form-item label="参数名称"  style="width: 35%;" >
                        <ui-input type="text" placeholder="请输入参数名称" v-model="searchForm.customerNo" > </ui-input>
                    </ui-form-item>
                 

                   
                   
                    
                   <div style="text-align: center; width: 100%;float: left;">
                        <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
                   </div>
                           
            </ui-form> -->

            <ui-form ref="paramForm" label-width="100px" class="demo-ruleForm">
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="参数编号" prop="paramNo">
                        <ui-input ></ui-input>
                        </ui-form-item>
                    </ui-col>
                    <ui-col :span="8">
                        <ui-form-item label="参数名称" prop="paramname">
                        <ui-input></ui-input>
                        </ui-form-item>
                    </ui-col>
                </ui-row>
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="参数编号" prop="paramNo">
                        <ui-input ></ui-input>
                        </ui-form-item>
                    </ui-col>
                    <ui-col :span="8">
                        <ui-form-item label="参数名称" prop="paramname">
                        <ui-input ></ui-input>
                        </ui-form-item>
                    </ui-col>
                </ui-row>

                <ui-row type="flex" class="row-bg" justify="center">
                    <ui-button type="primary" @click="submitForm('paramForm')">查询</ui-button>
                    <ui-button @click="resetForm('paramForm')">重置</ui-button>
                </ui-row>
            </ui-form>

        </div>
        <div style="border: 1px red solid; border-top: none;">

            <div>
                <ui-button style="float: right; margin-right: 5%;" @click="turndatas">
                     新增事件
                </ui-button>
            </div>
            <vx-table :tableData="tableData" :isSelect="false" :columns="columns" @multipleSelection="multipleSelection"
                :buttomGroup="buttomGroup" @openDetails="openDetails" ></vx-table>
                <ui-pagination
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            :layout="layout"
            :page-sizes="pageSizeList"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </ui-pagination>
        </div>
                
     

        <ui-dialog  :visible.sync="dialogVisible">
            <div style="text-align: center;">
                    修改参数
            </div>
            <ui-form style="width: 60%;margin-left: 20%;border: 1px red solid;height: 300px;" :label-position="right" label-width="110px"  >
                <ui-form-item label="参数编号"   style="float: left; width: 80%;" >
                    <ui-input type="text"  style="width: 100%;" placeholder="请输入参数编号" v-model="searchForm.customerName" > </ui-input>
                </ui-form-item>
                <ui-form-item label="参数名称"  required  style="float: left; width: 80%;" >
                        <ui-input type="text" style="width: 100%;" placeholder="请输入参数编号" v-model="searchForm.customerName" > </ui-input>
                </ui-form-item>
                <ui-form-item label="参数说明"  required style="float: left; width: 80%; height: auto;"  >
                        <ui-input type="textarea"  :rows="4" style="width: 100%; height: 80px;" placeholder="请输入参数编号" v-model="searchForm.customerName" > </ui-input>
                </ui-form-item>
                
                <ui-form-item style="float: left; width: 80%; border: 1px red solid; margin-left: 10%; margin-top: 15px;">
                    <template>
                        <ui-button>取消</ui-button>
                        <ui-button>下一步</ui-button>
                    </template>
                </ui-form-item>
            </ui-form>     
        </ui-dialog>




    </div>

</template>
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table';

export default{
    mixins: [pagination],
    components:{
        vxTable,
    },
   data(){
    return{
        dialogVisible:false,
        searchForm:{
            customerName:'',
            customerNo:'',
            startDate:'',
            endDate:''
        },
        layout:"total, sizes, prev, pager, next, jumper", // 分页顺序
        columns:[
            {
            prop: 'userName',
            label: '参数编号',
            fixed: true,
            },
            {
            prop: 'userName',
            label: '参数名称',
            fixed: true,
            },
            {
            prop: 'userName',
            label: '参数内容',
            fixed: true,
            },
            {
            prop: 'userName',
            label: '参数说明',
            fixed: true,
            },

        ],
        tableData:[],
        buttomGroup:[
        { label: '修改', methodsName: 'openDetails' }
        ]
    }
   },
   methods:{
    checkdate(){
       console.log("11"); 
    },
    turndatas(){
        this.$router.push({
            path:'systemeventAdd'
        })
    }
   }
}
</script>
<style lang="scss" scoped>
 ::v-deep .ui-input__prefix{
  display: none;
}
</style>